<template>
  <div>
    <Panel title="分配权限" useBack >
        <template slot="body">
          <div style="display: flex;">
            
            <div style="padding: 10px 33px;border: 1px solid #b0d4f9;border-radius: 9px; width:140px;margin-left:10px"><el-checkbox v-model="checked2" @change="expandAll">展开全部</el-checkbox></div>
          </div>
            <div class="block">
                <span class="role">角色名称：{{roleName}}</span>
            </div>
            <div class="block">
                <span class="demonstration">功能权限选择：</span>
                <el-tree
                  class="filter-tree"
                  show-checkbox
                  :data="options"
                  node-key="id"
                  :check-strictly="connect"
                  :props="props"
                  @check='changeCheck'
                  ref="tree"
                  :default-checked-keys="permissionIds"
                  v-bind="this.$attrs"
                ></el-tree>
            </div>
        </template>
    </Panel>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import TreeEncapsulation from "@/components/TreeEncapsulation";
export default {
  name:'roleAssign_',
  components: {
    Panel,
    ModifyForm,
    TreeEncapsulation,
  },
    data() {
      return {
        roleName:this.$route.query.name,
        roleId: '',
        showChange:false,
        connect:true,
        props: {
          children: 'permissionRespChildList',
          label: 'name',
          multiple:true,
          value:'id',
        },
        options: [],
        permissionIds: [],
        permissionIdsArray: [],
        quan:[],
        ban:[],
        checked1: false,
        checked2: false,
      };
    },
    methods:{
      async changeCheck(node,choose){
        console.log(node, choose)
        let url, postData
        if(choose.checkedNodes.length==0){
          url = `/manage/role/permission/delete/${node.id}`
          let res =await request({
            url: url,
            method: 'POST',
          })
          if( res.code !== 200) return
          this.$message.success('操作成功')
        }else{
          if(node.perms){
            postData = {
              roleId: this.roleId,
              parentId: node.parentId,
              permissionId: node.id
            }
            url = '/manage/role/permission/add/button'
          }else if(node.parentId){
            postData = {
              roleId: this.roleId,
              parentId: node.parentId,
              permissionId: node.id
            }
            url = '/manage/role/permission/add/child'
          }else{
            postData = {
              roleId: this.roleId,
              permissionId: node.id
            }
            url = '/manage/role/permission/add/one'
          }
          let res =await request({
            url: url,
            method: 'POST',
            data: postData
          })
          if( res.code !== 200) return
          this.$message.success('操作成功')
        }

      },
      async queryData(){
        let url = '/manage/permission/all'
        let res = await request({
          url: url,
          method: "POST",
          data: {}
        })
        let menu = res.data
        this.options = menu
      },
	  //角色拥有权限
	  async userOauth(){
         let auth = await request({
          url: `/manage/role/permission/query`,
          method: "POSt",
          data: {roleId: this.roleId}
        })
        var menuIdList = auth.data
        let that = this
       setTimeout(() => {
         that.$nextTick(() => {
            menuIdList.forEach((element,index) => {
              console.log('element.id',element)
                that.$refs.tree.getNode(element.id);
                // var node = that.$refs.tree.getNode(element.id);
                if(index==0){
                  // console.log('node',node)
                }
                
                // if (node.isLeaf) {
                //     that.$refs.tree.setChecked(node, true);
                // }
            });
        });
       }, 2000);
       return
        this.$refs.tree.setCurrentKey(auth.role.menuIdList);
      },
     
// 全部展开
    expandAll() {
      if (this.checked2) {
        for (var i in this.$refs.tree.store.nodesMap) {
          this.$refs.tree.store.nodesMap[i].expanded = true;
        }
      } else {
        for (var j in this.$refs.tree.store.nodesMap) {
          this.$refs.tree.store.nodesMap[j].expanded = false;
        }
      }
    },
    },
    created(){
      this.roleId = this.$route.query.id
      this.queryData()
      this.userOauth()
	    
    },
    mounted(){
      
    },
    computed: {
    }
  };
</script>
<style>
.block{
        margin-bottom: 50px;

}
.role{
        font-size: 14px;
        font-weight: bold;

}
.el-cascader-menu__wrap{
  height: auto;
}
    .demonstration{
        font-size: 14px;
        margin-right: 10px;
        margin-bottom: 20px;
        display: block;
    }
</style>